<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const citations: { authors: string; year: string; title: string; journal: string; volume: string; issue: string; pages: string; url: string }[] = []

const researchInstitutions = [
  { nameKey: 'footer.institutions.cas', url: 'https://www.cas.cn/' },
  { nameKey: 'footer.institutions.iop', url: 'http://www.iop.cas.cn/' },
  { nameKey: 'footer.institutions.cmpdc', url: 'https://cmpdc.iphy.ac.cn/' }
]
</script>

<template>
  <footer class="bg-neutral text-neutral-content w-full" role="contentinfo">
    <div class="footer md:footer-horizontal gap-16 px-16 py-8 md:justify-between">
      <!-- 关于 HSP -->
      <section aria-labelledby="about-title" class="max-w-md">
        <h2 id="about-title" class="footer-title">{{ t('footer.about.title') }}</h2>
        <p class="text-neutral-content/60 text-xs">
          {{ t('footer.about.description') }}
        </p>
      </section>

      <section aria-labelledby="citations-title">
        <h2 id="citations-title" class="footer-title">{{ t('footer.citations.title') }}</h2>
        <p class="text-neutral-content/80 mb-4">{{ t('footer.citations.description') }}</p>
        <div class="space-y-2">
          <article v-for="(citation, index) in citations" :key="index" class="bg-neutral-focus border-warning rounded-r-lg border-l-4 p-3 text-xs shadow-sm">
            <p class="text-neutral-content leading-relaxed">
              <span class="font-medium">{{ citation.authors }}</span>
              ({{ citation.year }}). {{ citation.title }}
              <em>{{ citation.journal }}</em>
              <template v-if="citation.volume">, {{ citation.volume }}</template>
              <template v-if="citation.issue">({{ citation.issue }})</template>
              <template v-if="citation.pages">, {{ citation.pages }}</template>
              .
            </p>
            <a :href="citation.url" target="_blank" rel="noopener noreferrer" class="link link-hover text-primary mt-1 inline-block text-xs" :aria-label="`View paper: ${citation.title}`">
              {{ citation.url }}
            </a>
          </article>
        </div>
      </section>
      <section aria-labelledby="institutions-title" class="min-w-md space-y-4">
        <h2 id="institutions-title" class="footer-title">{{ t('footer.institutions.title') }}</h2>
        <nav aria-label="Research institutions">
          <ul class="space-y-2">
            <li v-for="institution in researchInstitutions" :key="institution.nameKey">
              <a :href="institution.url" target="_blank" rel="noopener noreferrer" class="link link-hover" :aria-label="`Visit ${t(institution.nameKey)} website`">
                {{ t(institution.nameKey) }}
              </a>
            </li>
          </ul>
        </nav>
      </section>
    </div>
  </footer>
</template>
